<template>
    <div class="main">
        <a-row class="top-title">
            <a-col :span="6"><h3><span>专业名称：</span>供电专业</h3></a-col>
            <a-col :span="6"><h3><span>科室名称： </span>供电技术科</h3></a-col>
        <!-- <a-col :span="8"></a-col> -->
        </a-row>
        <a-row class="search">
            <a-col :span="3"><h3><span>绝缘工具名称：</span></h3></a-col>
            <a-col :span="5">
                <a-select
                    v-model:value="value"
                    show-search
                    placeholder=" "
                    style="width: 200px"
                    :options="toolList"
                    :filter-option="filterOption"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @change="handleChange"
                    allowClear
                >
                </a-select>
            </a-col>
            <a-col :span="5"><a-button type="primary" @click="handleSearchClick(value)" class="btn">查询</a-button></a-col>
        </a-row>
        <a-button type="primary" class="btn" @click="handleAddClick">新增</a-button>
        <!-- <Modal ref="modalRef" @load-data="loadData" :type="type"></Modal> -->
        <Modal ref="modalRef" @load-data="loadData" :majorName="majorName" :departmentName="departmentName"></Modal>
        <a-table :columns="columns" :data-source="data" bordered size="middle" class="table" >
            <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
                <a-button type="primary" class="btn" @click="handleEditClick(record)">编辑</a-button>
                <a-popconfirm 
                title="你真的要删除吗？" 
                ok-text="确定" 
                cancel-text="取消" 
                v-if="data.length"  
                @confirm="onDelete(record.id)"
                @cancel="cancel"
                >
                    <a-button type="primary" class="btn">删除</a-button>
                </a-popconfirm>
            </template>
            </template>
        </a-table> 
    </div>
</template>

<script setup>
import { ref, onMounted,watch } from 'vue';
import { GdInfoApi } from '@/api/insulated-data/base-info-data'
import Modal from './Modal.vue';
import request from '@/utils/request'

const data = ref([])
const value = ref('')
const toolList = ref([
{
 value: '验电器',
 label: '验电器',
 }, {
  value: '110kv验电器',
  label: '110kv验电器',
 }, {
  value: '27.5kv验电器',
  label: '27.5kv验电器',
 }, {
  value: '10kv验电器',
  label: '10kv验电器',
 }, {
  value: '打杂杆', 
   label: '打杂杆',
 }, {
  value: '令克棒',
  label: '令克棒',
 }, {
  value: '接地杆',
  label: '接地杆',
 }, {
  value: '绝缘手套',
  label: '绝缘手套',
 }, {
  value: '绝缘靴',
  label: '绝缘靴',
 }, {
  value: '打冰杆',
  label: '打冰杆',
 }, {
  value: '等电位杆',
   label: '等电位杆',
 }, {
  value: '绝缘测杆',
  label: '绝缘测杆',
 }, {
  value: '绝缘操作手柄',
  label: '绝缘操作手柄',
 },
]);
const modalRef = ref(null)
const info = ref({})
const majorName =  ref('供电专业')
const departmentName = ref('供电技术科')
// const tag = ref(true)
// const type = ref('post')



//加载数据
const loadData = async () => {
    const toolResult = await request({
        url:'/category/list',
        method:'get',
        params:{
        // id:1
        }
    })
    // console.log(toolResult);
    data.value = toolResult.data.data
}

onMounted(async () => {
    loadData()
    // toolList.value=[]
    // let result = await request.get('/api/quota/optionalTools')
    // result.data.data.map(item => {
    //     let obj = {
    //         value: item.name,
    //         label: item.name,
    //         id:item.id
    //     }
    //     toolList.value.push(obj);
    // });
    // console.log(result);
})

const columns = [
    {
  title: '绝缘工具',
  dataIndex: 'name',
  key: 'name',
  width: 100,
  align:'center'
}, {
  title: '电气试验标准',
  children: [{
    title: '工作电压（kv）',
    dataIndex: 'workingVoltage',
    key: 'workingVoltage',
    width: 130,
    align:'center'
  }, {
    title: '交流试验电压',
    children: [{
      title: '试验电压（kv）',
      dataIndex: 'testingVoltage',
      key: 'testingVoltage',
      width: 130,
      align:'center'
    //   width: 200,
    }, {
      title: '试验长度（m)',
      dataIndex: 'length',
      key: 'length',
      width: 130,
      align:'center'
    //   width: 200,
    }],
  },{
        title: '试验持续时间（分）',
        dataIndex: 'testDuration',
        key: 'testDuration',
        width: 150,
        align:'center'
        // width: 200,
    },{
    title: '试验周期（月）',
    dataIndex: 'testPeriod',
    key: 'testPeriod',
    width: 130,
    align:'center'
  }],
}, {
  title: '单位',
  dataIndex: 'unit',
  key: 'unit',
  width: 80,
  align:'center'
},{
  title: '用途',
  dataIndex: 'useage',
  key: 'useage',
  width: 100,
  align:'center'
},{
  title: '备注',
  dataIndex: 'tips',
  key: 'tips',
  width: 100,
  align:'center'
},{
  title: '操作',
  dataIndex: 'operation',
  key: 'operation',
  align:'center'
//   width: 80,
}]

watch(value,()=>{
    if(value.value === undefined){
        loadData()
    }
// console.log(value.value);
})
//确认删除框
const onDelete = async(id) => {
    // const result = await request.post(`/tools/delete${id}`)
    console.log(id)
    // id=id.toString().slice(1,)
    // let obj={
    //     'id':id
    // }
    // var id=JSON.stringify(obj)
    console.log(id)
    const result=await request({
        url:'/category/delete',
        method:'post',
        data:{
           id:id
        }
    })
    console.log(result)
    // GdInfoApi.delete(id)
    loadData()
};
const cancel=e=>{}

//下拉框
const handleChange = value => {
    console.log(`selected ${value}`);
};
const handleBlur = () => {};
const handleFocus = () => {};
const filterOption = (input, option) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

//新增按钮
const handleAddClick = async() => {
    let params = {
        type:'increasse',
        rec:{}
    }
    // console.log('Add:',params);
    modalRef.value.showModal(params)
}

//编辑按钮
const handleEditClick = (r) => {
    // console.log(r)
    let params = {
        type:'edit',
        rec:r
    }
    // console.log('Edit:',params);
    modalRef.value.showModal(params)
}

//查询按钮
const handleSearchClick = async(value) =>{
    // console.log(value)
    const k=ref()
    // for(let key in toolList.value){
    //     if(toolList.value[key].label===value ){
    //         k.value=toolList.value[key].id
    //     }
        
    for(var i=0;i<toolList.value.length;i++){
        if(toolList.value[i].label===value){
            k.value=toolList.value[i].id
        }
    }
    // console.log(typeof k.value);
    // console.log(k.value)
    // const result = await request.get(`/feathers/gd-base-info?insulatedEquipment=${value}`)
    const result = await request({
        url:'/category/detail',
        method:'get',
        params:{
            id:k.value
        }
    })
    console.log(result)
    data.value=[]
    data.value.push(result.data.data)
}



</script>

<style lang="less" scoped>
.main{
    padding: 20px 0 0 20px;
}
h3{
    display: inline-block;
}
span{
    font-weight: 700;
}
.search{
    padding: 20px 0 20px 0;
    
} 
.table{
    padding: 20px 20px 0 0;
}
// .edit{
//     margin-right: 20px;
// }
.btn{
    background-color: #169bd5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: white;
    height: 38px;
    width: 80px;
}
</style>